```vue
<template>
  <div class="container">
    <!-- 头部返回按钮和标题 -->
    <div class="header">
      <van-icon name="arrow-left" size="20" @click="goBack" />
      <span class="title">个人资料</span>
    </div>

    <!-- 主图片和验证标记 -->
    <div class="image-section">
      <img :src="backgroundUrl || '../../assets/头像.jpg'" alt="Profile Image" class="main-image" />
      <div class="verified-icon" v-if="isVerified">
        <van-icon name="passed" size="16" color="#07c160" />
      </div>
    </div>

    <!-- 圆形头像和验证标记 -->
    <div class="avatar-section">
      <van-image round width="5rem" height="5rem"
        :src="avatarUrl || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'" class="avatar-image" />
      <div class="verified-icon-small" v-if="isVerified">
        <van-icon name="passed" size="12" color="#07c160" />
      </div>
    </div>

    <!-- 表单输入部分 -->
    <van-cell-group>
      <van-field v-model="surname" label="姓" placeholder="请输入姓" />
      <van-field v-model="name" label="名" placeholder="请输入名" />
      <van-field v-model="username" label="用户名" placeholder="请输入用户名" />
      <van-field v-model="phone" label="电话" placeholder="请输入电话" type="tel" />
      <van-field v-model="email" label="邮箱" placeholder="请输入邮箱" type="email" />
      <van-field v-model="birthday" label="出生日期" placeholder="请选择日期" readonly @click="showBottom = true"
        right-icon="calendar-o" />
    </van-cell-group>

    <!-- 日期选择器 -->
    <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '50%', width: '75%' }">
      <van-date-picker v-model="currentDate" title="选择日期" :min-date="minDate" :max-date="maxDate"
        @confirm="onConfirm" />
    </van-popup>

    <van-field name="radio" label="性别">
      <template #input>
        <van-radio-group v-model="gender" direction="horizontal">
          <van-radio name="1">男</van-radio>
          <van-radio name="2">女</van-radio>
        </van-radio-group>
      </template>
    </van-field>

    <!-- 提交按钮 -->
    <van-button type="primary" block class="submit-button" :loading="isSubmitting" @click="submit">
      保存修改
    </van-button>
    <p v-if="successMessage" class="success">{{ successMessage }}</p>
    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { showToast } from 'vant';
import axios from 'axios';
import { format, parse } from 'date-fns';

const router = useRouter();
const route = useRoute();
const userId = route.query.id
// 表单数据（从数据库加载）
const surname = ref<string>('');
const name = ref<string>('');
const username = ref<string>('');
const phone = ref<string>('');
const email = ref<string>('');
const birthday = ref<string>(''); // 确保初始为空
const gender = ref<string>(''); // 1: 男, 2: 女
const backgroundUrl = ref<string>(''); // 背景图片
const avatarUrl = ref<string>(''); // 头像URL
const isVerified = ref<boolean>(false); // 验证状态
const showBottom = ref<boolean>(false);
const isSubmitting = ref<boolean>(false);
const successMessage = ref<string>('');
const errorMessage = ref<string>('');

// 日期选择器
const currentDate = ref<Date>(new Date()); // 默认值，确保有效
const minDate = new Date('1900-01-01');
const maxDate = new Date(); // 当前日期

const goBack = () => {
  router.back();
};

const onConfirm = (value: Date) => {
  if (!isNaN(value.getTime())) {
    console.log('Selected date:', value); // 调试
    birthday.value = `${value.getFullYear()}年${value.getMonth() + 1}月${value.getDate()}日`;
    currentDate.value = value; // 同步更新
    showBottom.value = false;
  } else {
    console.error('Invalid date selected:', value);
    currentDate.value = new Date(); // 回退到当前日期
    showBottom.value = false;
  }
};

const submit = async () => {
  try {
    isSubmitting.value = true;
    successMessage.value = '';
    errorMessage.value = '';

    // 简单的表单验证
    if (!surname.value || !name.value || !username.value || !phone.value || !email.value || !birthday.value) {
      errorMessage.value = '请填写所有必填项';
      return;
    }

    // 转换为后端所需格式
    const birthDate = new Date(birthday.value.replace('年', '-').replace('月', '-').replace('日', ''));
    if (isNaN(birthDate.getTime())) {
      errorMessage.value = '出生日期格式无效';
      return;
    }

    // 调用后端 API 更新用户信息
    const response = await axios.post(`http://localhost:3000/update-profile/${userId}`, {
      surname: surname.value,
      name: name.value,
      username: username.value,
      phone: phone.value,
      email: email.value,
      birthday: birthDate,
      gender: gender.value,
      background: backgroundUrl.value,
      avatar: avatarUrl.value,
    });

    if (response.data.success) {
      successMessage.value = '个人资料更新成功！';
      showToast({ message: '更新成功', type: 'success' });
      setTimeout(() => router.push('/mypage'), 1500);
    } else {
      errorMessage.value = response.data.message || '更新失败，请重试';
      showToast({ message: errorMessage.value, type: 'fail' });
    }
  } catch (error) {
    errorMessage.value = '发生错误，请稍后重试';
    showToast({ message: errorMessage.value, type: 'fail' });
    console.error(error);
  } finally {
    isSubmitting.value = false;
  }
};

// 初始加载用户数据从数据库
onMounted(async () => {
  try {
    const response = await axios.get(`http://localhost:3000/profile/${userId}`);
    const data = response.data;
    console.log('Fetched data:', data); // 调试日志
    // 确保字段为字符串
    surname.value = typeof data.surname === 'string' ? data.surname : '';
    name.value = typeof data.name === 'string' ? data.name : '';
    username.value = typeof data.username === 'string' ? data.username : '';
    phone.value = typeof data.phonenumber === 'string' ? data.phonenumber : '';
    email.value = typeof data.email === 'string' ? data.email : '';
    // 增强日期处理
    if (data.birthday) {
      let birthDate: Date;
      if (typeof data.birthday === 'string') {
        birthDate = parse(data.birthday, 'yyyy年M月d日', new Date());
        if (isNaN(birthDate.getTime())) {
          birthDate = new Date(data.birthday); // 尝试 ISO 格式
        }
      } else {
        birthDate = new Date(data.birthday); // 如果是 Date 对象
      }
      if (!isNaN(birthDate.getTime())) {
        birthday.value = format(birthDate, 'yyyy年M月d日');
        currentDate.value = birthDate;
      } else {
        console.warn('Invalid birthday format:', data.birthday);
        birthday.value = '';
        currentDate.value = new Date();
      }
    } else {
      birthday.value = '';
      currentDate.value = new Date();
    }
    gender.value = typeof data.gender === 'number' ? data.gender.toString() : '';
    backgroundUrl.value = typeof data.background === 'string' ? data.background : '';
    avatarUrl.value = typeof data.avtar === 'string' ? data.avtar : '';
    isVerified.value = typeof data.isVerified === 'boolean' ? data.isVerified : false;
  } catch (error) {
    console.error('加载数据失败:', error);
    errorMessage.value = '加载个人资料失败，请重试';
    showToast({ message: errorMessage.value, type: 'fail' });
    birthday.value = '';
    currentDate.value = new Date();
  }
});

// 同步 birthday 和 currentDate
watch(birthday, (newValue) => {
  if (newValue) {
    const date = parse(newValue, 'yyyy年M月d日', new Date());
    if (!isNaN(date.getTime())) {
      currentDate.value = date;
    } else {
      console.warn('Invalid parsed date:', newValue);
      currentDate.value = new Date();
    }
  }
});
</script>

<style scoped>
.container {
  font-family: 'Noto Sans SC', sans-serif;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ebedf0;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  color: #323233;
}

.image-section {
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.main-image {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
}

.verified-icon {
  position: absolute;
  top: 10px;
  right: 10px;
}

.avatar-section {
  position: relative;
  bottom: 67px;
  text-align: center;
  margin-bottom: -50px;
}

.avatar-image {
  margin: 0 auto;
}

.verified-icon-small {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

van-cell-group {
  margin: 10px 0;
}

.submit-button {
  margin: 20px;
  background-color: #1989fa;
}

.error {
  color: #e74c3c;
  font-size: 14px;
  text-align: center;
  margin-top: 5px;
}

.success {
  color: #2ecc71;
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
}
</style>
```